<template>
  <div ref="elementRef" class="lowcodepage">
    <div class="app-loading">
      <div class="app-loading-wrap">
        <div class="app-loading-title">
          <img
            v-if="isDark"
            src="@/assets/imgs/logo-dark.svg"
            class="app-loading-logo"
            alt="Logo"
          />
          <img v-else src="@/assets/imgs/logo-dark.svg" class="app-loading-logo" alt="Logo" />
        </div>
        <div class="spinner">
          <div class="spinner-container container1">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
          </div>
          <div class="spinner-container container2">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
          </div>
          <div class="spinner-container container3">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
          </div>
        </div>
        <div class="app-loading-text">{{ t('common.appLoading') }}...</div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { loadMicroApp } from 'qiankun'
import { useRouter } from 'vue-router'
import { getAccessToken, getTenantId } from '@/utils/auth'
import { checkPermi } from '@/utils/permission'
import { useLocaleStore } from '@/store/modules/locale'
import { useAppStore } from '@/store/modules/app'
import { useUserStore } from '@/store/modules/user'

const appStore = useAppStore()
const isDark = ref(appStore.getIsDark)

const localeStore = useLocaleStore()
const { t } = useI18n() // 国际化

const elementRef = ref(null)
const microContainer = ref()

const router = useRouter() // 路由对象

const userStore = useUserStore()

const loadApp = () => {
  if (microContainer.value) {
    microContainer.value.unmount()
    microContainer.value = null
  }
  const container = elementRef.value
  if (!container) {
    return
  }
  const route = useRoute()
  const entry = route.meta?.lowcodePageUrl
  if (!entry) {
    return
  }
  const microApp = {
    name: route.path,
    entry,
    container,
    props: {
      extVars: {
        getRouter: () => {
          return () => ({
            reload: () => window.location.reload(),
            redirect: ({ url }) => router.replace(url),
            back: () => router.back(),
            forward: () => router.forward(),
            pushState: ({ state, title, url }) => router.push(url),
            openTab: ({ url, title }) => window.open(url, title || "_blank"),
          });
        },
      }
    }
  }
  const token = 'Bearer ' + getAccessToken()
  const tenantId = getTenantId()
  window.MYBRICKS_HOST = {
    default: import.meta.env.VITE_LOW_CODE_PAGE_BASE_URL || location.origin,
    token,
    tenantId,
    isDark: unref(isDark),
    getToken: () => {
      return token
    },
    checkPermission(key: string) {
      return checkPermi([key])
    },
    getCurrentLanguage() {
      return localeStore.getAxiosLangHeader || 'zh'
    },
    locale(key: string) {
      return t(key)
    },
    getUserInfo: () => {
      return userStore.user
    },
    navigateTo(path: string, query: any) {
      console.log('>>>> router push', query)
      router.push({
        path: path,
        query: query
      })
    },
    redirectTo(path: string, query: any) {
      console.log('>>>> router replace', query)
      router.replace({
        path: path,
        query: query
      })
    }
  }
  microContainer.value = loadMicroApp(microApp, { sandbox: true })
}

onMounted(() => {
  loadApp()
})

onUnmounted(() => {
  if (microContainer.value) {
    microContainer.value.unmount()
    microContainer.value = null
  }
})
</script>
<style scoped lang="scss">
.app-loading {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: #f0f2f5;
}

.app-loading .app-loading-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.app-loading .app-loading-title {
  margin-bottom: 30px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

.app-loading .app-loading-logo {
  width: 236px;
  margin: 0 auto 15px auto;
}

.app-loading .app-loading-item {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 60px;
  vertical-align: middle;
  border-radius: 50%;
}

.app-loading .app-loading-outter {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 4px solid #2d8cf0;
  border-bottom: 0;
  border-left-color: transparent;
  border-radius: 50%;
  animation: loader-outter 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
}

.app-loading .app-loading-inner {
  position: absolute;
  top: calc(50% - 20px);
  left: calc(50% - 20px);
  width: 40px;
  height: 40px;
  border: 4px solid #87bdff;
  border-right: 0;
  border-top-color: transparent;
  border-radius: 50%;
  animation: loader-inner 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
}

.app-loading-text {
  margin-top: 20px;
  color: #ffffff;
}

.light .app-loading-text {
  color: #000000;
}

@-webkit-keyframes loader-outter {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes loader-outter {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes loader-inner {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}

@keyframes loader-inner {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
.spinner {
  margin: auto;
  width: 20px;
  height: 20px;
  position: relative;
}

.container1 > div,
.container2 > div,
.container3 > div {
  width: 6px;
  height: 6px;
  background-color: #ffffff;

  border-radius: 100%;
  position: absolute;
  -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
  animation: bouncedelay 1.2s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.light {
  .container1 > div,
  .container2 > div,
  .container3 > div {
    background-color: #000000;
  }
}

.spinner .spinner-container {
  position: absolute;
  width: 100%;
  height: 100%;
}

.container2 {
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}

.container3 {
  -webkit-transform: rotateZ(90deg);
  transform: rotateZ(90deg);
}

.circle1 {
  top: 0;
  left: 0;
}
.circle2 {
  top: 0;
  right: 0;
}
.circle3 {
  right: 0;
  bottom: 0;
}
.circle4 {
  left: 0;
  bottom: 0;
}

.container2 .circle1 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.container3 .circle1 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

.container1 .circle2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.container2 .circle2 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

.container3 .circle2 {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}

.container1 .circle3 {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}

.container2 .circle3 {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}

.container3 .circle3 {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}

.container1 .circle4 {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}

.container2 .circle4 {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}

.container3 .circle4 {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}

@-webkit-keyframes bouncedelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
  }
}

@keyframes bouncedelay {
  0%,
  80%,
  100% {
    transform: scale(0);
    -webkit-transform: scale(0);
  }
  40% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}
</style>
